<template>
	<view class="my-content">
		<u-swiper class="swiper" :list="bannerList" indicator-pos="bottomRight"></u-swiper>
		<view class="position padding">
			<view class="card bgWhite padding">
				<view class="carTitle u-flex padding">
					<image class="icon" :src='serverImageUrl("/static/images/teleSales/titleIcon.png")'>
					</image>
					<view class="u-margin-left-20 u-margin-right-20">{{$t('任务下单')}}</view>
					<image class="icon rotate" :src='serverImageUrl("/static/images/teleSales/titleIcon.png")'>
					</image>
				</view>

				<view class="u-flex btns u-margin-top-20 u-margin-bottom-40">
					<u-button type="primary" :custom-style="type === 'bf' ? btnActiveStyle : btnDefaultStyle"
						hover-class="none" @click="changeType('bf')" class="u-margin-right-20">
						{{$t("批量拜访")}}
					</u-button>
					<u-button type="primary" :custom-style="type === 'qt' ? btnActiveStyle : btnDefaultStyle"
						hover-class="none" @click="changeType('qt')" class="u-margin-right-20">
						{{$t("商务洽谈")}}
					</u-button>
				</view>

				<view>
					<u-input height="60" border :placeholder="$t('选择拜访名单')" disabled @click="toCheckBfList"
						:custom-style="myStyle" />
				</view>
				<view class="u-margin-top-40 u-margin-bottom-30">
					<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="toOrder">
						{{$t("立即下单")}}
					</u-button>
				</view>
			</view>


			<view class="title u-flex u-margin-bottom-20 u-margin-top-20">
				<view>
					<image :src='serverImageUrl("/static/images/com/customerListByNews/titleIcon.png")'>
					</image>
					{{$t("任务列表")}}
				</view>
				<view class="more" @click="toTaskMore">
					{{$t("查看更多>")}}
				</view>
			</view>



			<view class="u-flex" style="overflow: auto;">
				<u-card class="taskListCard" :show-head="false" margin="0" v-for="item in taskList" :key="item.id">
					<view slot="body">
						<view class="u-line-1">{{$t("任务编号")}}：{{item.id}}</view>
						<u-button type="primary" :custom-style="item.type === '1' ? btnStatusBfStyle : btnStatusQtStyle"
							hover-class="none">
							{{item.type === '1' ? $t("批量拜访") : $t("商务洽谈")}}
						</u-button>
						<view class="u-font-30 u-margin-bottom-10 u-margin-top-20 u-line-1 color-666">
							{{item.type === '1' ? $t("通话数量") : $t("通话时长(分钟)")}}
						</view>
						<view class="u-margin-bottom-10 number">{{item.num}}</view>
						<view class="statusBtn">
							<u-button type="primary" :custom-style="compuntedTaskListBtnStatus(item.status)"
								hover-class="none">
								<template v-if="item.status === '0'">
									{{$t("待报价")}}
								</template>
								<template v-if="item.status === '1'">
									{{$t("待付款")}}
								</template>
								<template v-if="item.status === '2'">
									{{$t("进行中")}}
								</template>
								<template v-if="item.status === '3'">
									{{$t("已完成")}}
								</template>
							</u-button>

						</view>
					</view>
				</u-card>
			</view>


			<view class="title u-flex u-margin-bottom-20 u-margin-top-20">
				<view>
					<image :src='serverImageUrl("/static/images/com/customerListByNews/titleIcon.png")'>
					</image>
					{{$t("数据统计")}}
				</view>
			</view>
			<view style="margin: 0 -10rpx;margin-bottom: 40rpx;">
				<u-row gutter="20" align="top">
					<u-col span="6">
						<u-card class="charts" margin="0" :show-head="false">
							<view slot="body">
								<view class="chartsTitle u-font-24">{{$t("累计获客")}}</view>
								<view style="height: 220rpx;">
									<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
								</view>
								<view class="chartsLabel u-line-1 u-text-center">{{$t("您已超过") + 76 + $t("%的用户")}}</view>
							</view>
						</u-card>
					</u-col>
					<u-col span="6">
						<u-col span="12">
							<image @click="toFavorite" class="dataBaseImg u-margin-bottom-20"
								:src='serverImageUrl("/static/images/teleSales/icon.png")'>
							</image>
						</u-col>
						<u-col span="12">
							<u-card class="charts" margin="0" :show-head="false">
								<view slot="body">
									<view class="chartsTitle u-font-24">{{$t("深度合作")}}</view>
									<view class="number u-flex">
										<view class="bigNumber">1000</view>
										<view>{{$t("家")}}</view>
									</view>
								</view>
							</u-card>
						</u-col>
					</u-col>
				</u-row>
			</view>

			<u-card class="charts" margin="0" :show-head="false">
				<view slot="body">
					<view class="chartsTitle u-font-24">{{$t("合作企业")}}</view>
					<qiun-data-charts type="column" :opts="optsByColumn" :chartData="chartDataByColumn" />
				</view>
			</u-card>

			<view class=" u-margin-top-40">
				<u-card class="charts" margin="0" :show-head="false">
					<view slot="body">
						<view class="chartsTitle u-font-24">{{$t("获客频率")}}</view>
						<qiun-data-charts type="line" style="height: 400rpx;" :opts="optsByLine"
							:chartData="chartDataByLine" />
					</view>
				</u-card>
			</view>


			<view class="title u-flex u-margin-bottom-30 u-margin-top-20">
				<view>
					<image :src='serverImageUrl("/static/images/com/customerListByNews/titleIcon.png")'>
					</image>
					{{$t("任务回执")}}
				</view>
				<view class="more" @click="toReTaskMore">
					{{$t("查看更多>")}}
				</view>
			</view>
			<u-cell-group class="u-margin-bottom-20 card overHidden" v-for="item in taskReList" :key="item.id">
				<u-cell-item :arrow="false">
					<view class="u-flex taskReListItem">
						<view class="overHidden">
							<view class="u-line-1" style="line-height: 40rpx;">{{$t("任务编号")}}：{{item.id}}</view>
							<view>
								<u-button type="primary"
									:custom-style="item.type === '1' ? btnStatusBfStyle : btnStatusQtStyle"
									style="width: 200rpx;" hover-class="none">
									{{item.type === '1' ? $t("批量拜访") : $t("商务洽谈")}}
								</u-button>
							</view>
						</view>
						<u-button type="primary" :custom-style="btnStatusStyleByReList" @click="toReTaskInfo(item)"
							hover-class="none">
							{{$t("查看回执")}}
						</u-button>
					</view>
				</u-cell-item>
			</u-cell-group>

		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			compuntedTaskListBtnStatus(status) {
				return (status) => {
					let style = {
						background: '#ffeee7',
						'border-radius': '35rpx',
						'min-width': '150rpx',
						'font-size': '24rpx',
						height: '48rpx',
						color: '#ff7348',
						margin: '0 !important'
					};
					switch (status) {
						case "0":
							style.background = 'transparent';
							style.border = '1rpx solid #ff4a17'
							break;
						case "1":
							style.background = '#ff4848';
							style.color = '#fff';
							break;
						case "2":
							style.background = '#ffeee7';
							style.color = '#ff7348';
							break;
						case "3":
							style.background = '#e7ffe7';
							style.color = '#45de3d';
							break;
						default:
							break;
					}
					return style
				}
			}
		},
		data() {
			return {
				btnStatusStyleByReList: {
					background: '#45de3d',
					'border-radius': '35rpx',
					'font-size': '26rpx',
					height: '68rpx',
					margin: '20rpx 0',
					color: '#fff'
				},
				chartData: {},
				opts: {
					color: ["#ff6908"],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 22,
						color: "#000"
					},
					subtitle: null,
					extra: {
						arcbar: {
							type: "circle",
							width: 20,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom",
							customColor: ["#ffad4c"],
						}
					},
				},
				chartDataByColumn: {},
				optsByColumn: {
					color: ["#2d63ff", "#ff7123", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							seriesGap: 5,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				btnStatusBfStyle: {
					background: '#ffeee7',
					'border-radius': '5rpx',
					'width': '180rpx',
					'font-size': '24rpx',
					height: '48rpx',
					margin: '20rpx 0',
					color: '#ff7348'
				},
				btnStatusQtStyle: {
					background: '#ffe7e7',
					'border-radius': '5rpx',
					'width': '180rpx',
					'font-size': '24rpx',
					height: '48rpx',
					margin: '20rpx 0',
					color: '#ff4848'
				},
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					'width': '240rpx',
					height: '70rpx',
				},
				btnDefaultStyle: {
					background: '#f2f2f2',
					'border-radius': '10rpx',
					'width': '200rpx',
					color: '#999999',
					height: '60rpx',
					margin: 0
				},
				btnActiveStyle: {
					background: 'transparent',
					'border-radius': '10rpx',
					'width': '200rpx',
					color: '#ff4a17',
					height: '60rpx',
					'border': '1px solid #ff4a17',
					margin: 0
				},
				bannerList: ["https://www.runoob.com/images/pulpit.jpg", "https://www.runoob.com/images/pulpit.jpg"],
				type: 'bf', //bf 批量拜访 qt 商务洽谈
				taskList: [{
					id: '123i876418724',
					type: '1', //1 批量拜访 2 商务洽谈
					num: '1000',
					status: '0', // 0 待报价 1 代付款 2 进行中 3 已完成 （待定)
				}, {
					id: '47576867844',
					type: '2', //1 批量拜访 2 商务洽谈
					num: '1000',
					status: '1', // 0 待报价 1 代付款 2 进行中 3 已完成 （待定)
				}, {
					id: '6546796796',
					type: '2', //1 批量拜访 2 商务洽谈
					num: '1000',
					status: '2', // 0 待报价 1 代付款 2 进行中 3 已完成 （待定)
				}, {
					id: 'gg3433',
					type: '2', //1 批量拜访 2 商务洽谈
					num: '1000',
					status: '3', // 0 待报价 1 代付款 2 进行中 3 已完成 （待定)
				}],
				chartDataByLine: {},
				optsByLine: {
					color: ["#2d63ff", "#ff7123", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [25, 0, 0, 0],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					},
				},

				taskReList: [{
					id: '234234',
					type: '1',
				}, {
					id: '234243asdfasdfffffffffffffffffasf3434',
					type: '2',
				}]
			};
		},
		onLoad() {
			this.getChartData();
		},
		methods: {
			//跳转名单页面
			toFavorite() {
				this.$u.route({
					url: 'pages/teleSales/favoriteList/favoriteList',
					params: {
						type: 'bf'
					}
				})
			},
			//跳转任务回执详情页面
			toReTaskInfo(row) {
				this.$u.route({
					url: 'pages/teleSales/taskReceipt/taskReceipt',
					params: {
						id: row.id
					}
				})
			},
			//跳转任务回执更多页面
			toReTaskMore() {
				this.$u.route({
					url: 'pages/teleSales/taskList/taskList',
					params: {
						status: "3"
					}
				})
			},
			getChartData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							name: "正确率",
							data: 0.8
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));


					let resByColumn = {
						categories: ["配饰", "鞋包", "箱包", "其他"],
						series: [{
								name: this.$t("成功合作"),
								data: [35, 36, 31, 33]
							},
							{
								name: this.$t("深度合作"),
								data: [18, 27, 21, 24]
							}
						]
					};
					this.chartDataByColumn = JSON.parse(JSON.stringify(resByColumn));




					let resByLine = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: this.$t("我的获客"),
								// lineType: "dash",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: this.$t("平均获客"),
								data: [70, 40, 65, 100, 44, 68]
							},
						]
					};
					this.chartDataByLine = JSON.parse(JSON.stringify(resByLine));
				}, 500);
			},
			changeType(type) {
				this.type = type;
			},
			toCheckBfList() {
				//跳转选择拜访名单列表
				console.log(this.type);
			},
			//跳转立即下单页面
			toOrder() {
				console.log(this.type);
				this.$u.route({
					url: 'pages/teleSales/placeOrder/placeOrder',
					params: {
						type: this.type
					}
				})
			},
			//跳转任务列表更多页面
			toTaskMore() {
				this.$u.route({
					url: 'pages/teleSales/taskList/taskList'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;

		.padding {
			padding: 10rpx 30rpx;
		}

		.color-999 {
			color: #999;
		}

		.color-666 {
			color: #666;
		}

		.overHidden {
			overflow: hidden;
		}

		.card {
			border-radius: 15rpx;
			box-shadow: 0rpx 10rpx 20rpx #eee;
		}

		.bgWhite {
			background: #fff;
		}

		.dataBaseImg {
			width: 100%;
			height: 145rpx;
		}

		.taskReListItem {
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx;
			overflow: hidden;
		}

		.charts {
			.chartsTitle {
				font-weight: 800;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.chartsLabel {
				color: #999;
				margin-top: 10rpx;
			}

			.number {
				align-items: flex-end;
				color: #ff7348;

				.bigNumber {
					font-size: 70rpx;
					font-weight: 800;
					margin-right: 8rpx;
					transform: translateY(12rpx);
				}
			}
		}

		.taskListCard {
			min-width: 330rpx;
			max-width: 330rpx;
			margin: 0 !important;
			margin-right: 30rpx !important;

			&:last-child {
				margin-right: 0 !important;
			}

			.number {
				font-weight: 800;
				font-size: 60rpx;
			}

			.statusBtn {
				display: flex;
				justify-content: end;
			}
		}

		.title {
			font-size: 30rpx;
			line-height: 50rpx;
			font-weight: 800;
			justify-content: space-between;

			.more {
				color: #999;
				font-size: 24rpx;
				font-weight: normal;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 10rpx;
				transform: translateY(-2px);
			}
		}

		.swiper {
			position: relative;
			z-index: 1;
		}

		.position {
			position: relative;
			top: -20rpx;
			z-index: 2;

			.carTitle {
				justify-content: center;
				font-size: 34rpx;
				font-weight: 800;
				line-height: 60rpx;

				.icon {
					width: 30rpx;
					height: 30rpx;

					&.rotate {
						transform: rotate(180deg);
					}
				}
			}

			.btns {
				// justify-content: left;
			}
		}


	}
</style>